import React, { useEffect, useState } from "react";
import { Table, TableColumnsType } from "antd";
import { DataType } from "../interface/interfaces";
import axios from "axios";
import moment from "moment";
export default function Index({ id }: { id: number }) {
  const [data, setData] = useState<DataType[]>([]);
  async function getList() {
    const { data } = await axios.get(
      "http://127.0.0.1:3100/zsl/getZuList?id=" + id
    );
    data.data.forEach((item: DataType) => {
      if (item["createTime"]) {
        item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
      }
    });
    setData(data.data);
  }

  useEffect(() => {
    getList();
  }, [id]);

  const columns: TableColumnsType<DataType> = [
    {
      title: "状态",
      key: "name",
      width: 50,
      render: (re) => (
        <div>
          {" "}
          {re.name === "待取车" || re.name === "已取消" ? (
            <span
              style={{
                background: "#FFEECC",
                padding: "5px",
                borderRadius: "10px",
                color: "#FFB100",
              }}
            >
              {re.name}
            </span>
          ) : (
            <span
              style={{
                background: "#D7F0E5",
                padding: "5px",
                borderRadius: "10px",
                color: "#36B37E",
              }}
            >
              {re.name}
            </span>
          )}
        </div>
      ),
    },
    {
      title: "日期",
      width: 60,
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "订单号",
      dataIndex: "oid",
      key: "oid",
      width: 100,
    },
    {
      title: "预定车型",
      dataIndex: "cxname",
      key: "2",
      width: 100,
    },
    {
      title: "用车时间",
      dataIndex: "createTime",
      key: "3",
      width: 100,
    },
    {
      title: "金额",
      dataIndex: "rent",
      key: "4",
      width: 50,
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        scroll={{ x: 1500, y: 300 }}
        pagination={{
          defaultPageSize: 3, //默认煤业显示条数
          defaultCurrent: 1, //默认当前页数第二页
          pageSizeOptions: ["3", "5", "10"], //每页显示多少条
          locale: {
            items_per_page: "条/页",
          },
        }}
      />
    </div>
  );
}
